<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的个人中心</title>
<%@include file="/WEB-INF/common/js-css-file.jsp"%>
<style type="text/css">
body {
	background-color: #C7EDCC;
}
</style>
</head>

<body>
	<div class="container">
		<a href="/CoolAlbum/member_home.html" class="btn btn-default">返回</a>
		<hr>
		<div id="contentdiv" class="row">
		</div>
	</div>
	
	<script>
		/* 分类显示 */
		$(function() {
			$.ajax({
				type : "GET",
				url : "showpreview",
				success : function(result) {
					var contentdiv=$("#contentdiv").empty();
					var typevar=0;
					$.each(result.content.photo,function(index,element){
						var div=$("<div class='col-sm-6 col-md-3'></div>");
						var thumbnail=$("<div class='thumbnail'></div>");
						var imgUrl="${appPath}/"+this.pUrl;
						var img = $("<img style='height: 350px;width: 350px;' class='coolimg' alt='Responsive image' src='"+imgUrl+"'/>");
						var caption=$("<div class='caption' style='display: none;'></div>");
						var h3=$("<h3>"+result.content.phototype[typevar].pTypename+"</h3>");
						var pdesc=$("<p>"+result.content.phototype[typevar].pTypeDesc+"</p>");
						var button =$("<p><button class='btn btn-primary playpic' type='button' ptypeid='"+this.pTypeId+"'>放映</button></p>");
						div.append(thumbnail.append(img).append(caption.append(h3).append(pdesc).append(button))).appendTo(contentdiv);
						typevar++;
					});
				}
			});
		});
		
		/* 鼠标移动效果 */
		$("body").on("mouseover",".thumbnail",function(){
			$(this).children(".caption").show();
		});
		$("body").on("mouseout",".thumbnail",function(){
			$(this).children(".caption").hide();
		});
		
		/* 点击放映 */
		$("body").on("click",".playpic",function(){
			var href="${appPath}/photo/nowplay?pTypeId="+$(this).attr("ptypeid");
			window.open(href,"newwindow",
				"toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no")
		});
	</script>
</body>
</html>